<template>
  <div class="todo-list container">
    <div class="tabs">
      <ul>
        <li class="is-active"><a>所有({{ total }})</a></li>
        <li><a>已完成({{ completed }})</a></li>
        <li><a>未完成({{ uncompleted }})</a></li>
      </ul>
    </div>
    <div class="columns is-multiline is-mobile" v-if="total">
      <div class="column is-one-quarter" v-for="todo in todos" :key="todo.id">
        <TodoItem
          :id="todo.id"
          :title="todo.title"
          :completed="todo.completed"
        ></TodoItem>
      </div>
    </div>
    <div v-else>待办事项为空，请添加新待办事项！</div>
    <div>共计{{ total }}项，已完成{{ completed }}项，未完成{{ uncompleted }}项</div>
    <a href="https://www.baidu.com" @click.prevent>删除{{ completed }}项已完成事项</a>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  name: 'TodoList',
  props: { // 属性，从父组件中接收传递的数据
    todos: {
      type: Array,
      required: true
    }
  },
  computed: { // 计算属性
    total() {
      return this.todos.length
    },
    completed() {
      return this.todos.filter(todo => todo.completed).length
    },
    uncompleted() {
      return this.total - this.completed
    }
  },
  components: {
    TodoItem
  }
}
</script>

<style lang="scss">

</style>
